
<template>
  <div class="detail">
    <!-- {{ $route.query.id }} -->
    <div class="topbox">
      <span @click="toBack()">返回 </span>
    </div>
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in dataList.topImages"
          :key="index"
        >
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <p>{{ dataList.title }}</p>
    <p>
      {{ dataList.price }} <s>{{ dataList.highPrice }}</s>
    </p>

    <div class="box">
      <div v-for="item in detailData.columns" :key="item">{{ item }}</div>
    </div>

    <div class="butbox">
      <div class="bottom">
        <div>客服</div>
        <div>店铺</div>
        <div>收藏</div>
        <div @click="addCar(detailData)">加入购物车</div>
        <div>购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryDetail } from "@/plugins/api/index";
export default {
  name: "detail",
  data() {
    return {
      //详情所有数据
      detailData: [],
      //图片数据
      dataList: [],
    };
  },
  mounted() {
    this.requeryDetail();
  },
  methods: {
    toBack() {
      this.$router.back();
    },
    requeryDetail() {
      queryDetail(this.$route.query.id).then((res) => {
        this.detailData = res.data.result;
        this.dataList = this.detailData.itemInfo;
      });
    },
    addCar(item) {
      this.$router.push("/Shopcar");
  

      let obj = {
        img: item.itemInfo.topImages[0],
        title: item.itemInfo.title,
        check: false,
        id: item.itemInfo.iid,
        price:item.itemInfo.lowNowPrice,
        num:1
      };
      this.$store.commit('getShopCar',obj)
    },
  },
};
</script>

<style lang="scss" scoped>
.topbox {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #ccc;
  background-color: blue;
}
img {
  width: 100%;
  height: 300px;
}
.box {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  div {
    flex: 1;
  }
}
.swipe {
  height: 300px;
  // background-color: red;

  .my-swipe .van-swipe-item {
    height: 300px;
    // color: #fff;
    text-align: center;
    // background-color: #39a9ed;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.butbox {
  height: 55px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  .bottom {
    display: flex;
    justify-content: space-around;
    height: 55px;
    line-height: 55px;
    div {
      border: 1px solid #ccc;
      width: 100%;
      text-align: center;
    }
  }
}
</style>